﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head  th:replace="layout::head(${title},${desc})"></head>

<body>

<div id="main-wrapper">

    <!--替代头部-->
    <div th:replace="layout::header"></div>
    
    <!--Page Banner Section start-->
    <div class="page-banner-section section">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 class="page-banner-title">Latest News</h1>
                    <ul class="page-breadcrumb">
                        <li><a th:href="@{index.html}">主页</a></li>
                        <li class="active">News Right Sidebar</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Section end-->

    <!--News Section start-->
    <div class="news-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">
            <div class="row">
               
                <div class="col-xl-9 col-lg-8 col-12 order-1 mb-sm-50 mb-xs-50">
                   
                    <div class="row">

                        <!--News start-->
                        <div class="col-md-6 col-12 mb-30" th:each="newsRightSidebar:${newsRightSidebar}">
                            <div class="news">
                                <div class="image">
                                    <a th:href="@{news-details.html}"><img src="assets/images/news/news-1.jpg" alt=""></a>
                                    <div class="meta-wrap">
                                        <ul class="meta">
                                            <li>由 <a href="#">唐纳德</a></li>
                                            <li th:text="${newsRightSidebar.date}"></li>
                                        </ul>
                                        <ul class="meta back">
                                            <li>由 <a href="#">唐纳德</a></li>
                                            <li th:text="${newsRightSidebar.date}"></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="content">
                                    <h4 class="title"><a th:href="@{news-details.html}" th:text="${newsRightSidebar.title}"></a></h4>
                                    <div class="desc">
                                        <p th:text="${newsRightSidebar.content}"></p>
                                    </div>
                                    <a th:href="@{news-details.html}" class="readmore">继续浏览</a>
                                </div>
                            </div>
                        </div>
                        <!--News end-->
                    </div>

                    <div class="row mt-30">
                        <div class="col">
                            <ul class="page-pagination">
                                <li><a href="#"><i class="fa fa-angle-left"></i> Prev</a></li>
                                <li class="active"><a href="#">01</a></li>
                                <li><a href="#">02</a></li>
                                <li><a href="#">03</a></li>
                                <li><a href="#">04</a></li>
                                <li><a href="#">05</a></li>
                                <li><a href="#"><i class="fa fa-angle-right"></i> Next</a></li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
                
                <div class="col-xl-3 col-lg-4 col-12 order-2 pl-30 pl-sm-15 pl-xs-15">
                    
                    <!--Sidebar start-->
                    <div class="sidebar">
                        <h4 class="sidebar-title"><span class="text">Search</span><span class="shape"></span></h4>
                        
                        <div class="sidebar-search">
                            <form action="#">
                                <input type="text" placeholder="Search">
                                <button><i class="pe-7s-search"></i></button>
                            </form>
                        </div>
                        
                    </div>
                    <!--Sidebar end-->
                    
                    <!--Sidebar start-->
                    <div class="sidebar">
                        <h4 class="sidebar-title"><span class="text">Categiry</span><span class="shape"></span></h4>

                        <ul class="sidebar-list" th:each="newsTags:${newsTags}">
                            <li><a href="#" th:text="${newsTags.tagName}"></a></li>
                            <!--<li><a href="#">Real Home</a></li>-->
                            <!--<li><a href="#">Garages</a></li>-->
                            <!--<li><a href="#">Real Estates</a></li>-->
                            <!--<li><a href="#">Properties</a></li>-->
                            <!--<li><a href="#">Family House</a></li>-->
                        </ul>
                        
                    </div>
                    <!--Sidebar end-->
                    
                    <!--Sidebar start-->
                    <div class="sidebar">
                        <h4 class="sidebar-title"><span class="text">Popular News</span><span class="shape"></span></h4>
                        
                        <!--Sidebar Property start-->
                        <div class="sidebar-news-list" th:each="popularNewsList2:${popularNewsList2}">
                            
                            <div class="sidebar-news">
                                <div class="image">
                                    <a th:href="@{news-details.html}"><img src="assets/images/news/sidebar-news-1.jpg" alt=""></a>
                                </div>
                                <div class="content">
                                    <h5 class="title"><a th:href="@{news-details.html}" th:text="${popularNewsList2.title}"></a></h5>
                                    <span class="date" th:text="${popularNewsList2.date}"></span>
                                </div>
                            </div>

                        </div>
                        <!--Sidebar Property end-->
                        
                    </div>
                    
                    <!--Sidebar start-->
                    <div class="sidebar">
                        <h4 class="sidebar-title"><span class="text">Archive</span><span class="shape"></span></h4>
                        
                        <ul class="sidebar-list">
                            <li><a href="#">October 2018</a></li>
                            <li><a href="#">September 2018</a></li>
                            <li><a href="#">August 2018</a></li>
                            <li><a href="#">July 2018</a></li>
                            <li><a href="#">Jun 2018</a></li>
                            <li><a href="#">May 2018</a></li>
                        </ul>
                        
                    </div>
                    <!--Sidebar end-->
                    
                    <!--Sidebar start-->
                    <div class="sidebar">
                        <h4 class="sidebar-title"><span class="text">Popular Tags</span><span class="shape"></span></h4>
                        
                        <!--Sidebar Tags start-->
                        <div class="sidebar-tags" th:each="newsTags:${newsTags}">
                            <a href="#" th:text="${newsTags.tagName}"></a>
                            <!--<a href="#">Real Home</a>-->
                            <!--<a href="#">Baths</a>-->
                            <!--<a href="#">Beds</a>-->
                            <!--<a href="#">Garages</a>-->
                            <!--<a href="#">Family</a>-->
                            <!--<a href="#">Real Estates</a>-->
                            <!--<a href="#">Properties</a>-->
                            <!--<a href="#">Location</a>-->
                            <!--<a href="#">Price</a>-->
                        </div>
                        <!--Sidebar Tags end-->
                    
                    </div>
            
                </div>
                
            </div>
        </div>
    </div>
    <!--News Section end-->

    <!--尾部-->
    <div th:replace="layout::footer"></div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/map-place.js"></script>
<script src="assets/js/main.js"></script>

</body>

</html>
